<template>
  <div class="goodsItem" @click="goodsitemClick">
    <div class="itemImg">
      
        <img :src="goodsItemObj.image?goodsItemObj.image:goodsItemObj.show.img" alt="" @load="goodsitemImgLoad">
      
    </div>
    <div class="itemInfo">
      <p>{{goodsItemObj.title}}</p>
      <span style="color:pink">￥{{goodsItemObj.price}}</span>
      <span class="cfav"><img src="~assets/img/common/collect.svg" style="width:15px">{{goodsItemObj.cfav}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsItem",
  props: {
    goodsItemObj: {
      type: Object,
      default(){
        return {};
      }
    }
  },
  methods: {
    goodsitemImgLoad(){
      if(this.$route.path.indexOf("/home") !== (-1)){
        this.$bus.$emit('gImgLoad');
      }else if(this.$route.path.indexOf("/detail") !== (-1)){
        this.$bus.$emit("detailRImgLoad");
      }
    },
    goodsitemClick(){
      if(this.goodsItemObj.iid){
        this.$router.push("/detail/"+this.goodsItemObj.iid);
      }      
    }
  },
  // created(){
  //   console.log(this.goodsItemObj);
  // }
}
</script>

<style scoped>
  .goodsItem{
    margin-top: 10px;
    width:48%;
  }
  .itemImg img{
    width: 100%;
  }
  .itemInfo p{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .cfav{
    margin-left: 20px
  }

  .itemInfo{
    margin-top: 10px;
  }


</style>